<template>
  <div class="culture-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">企业文化管理流程</h2>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(step, index) in processSteps" 
                 :key="index" 
                 :title="step.title"
                 :description="step.shortDesc"
                 @click.native="goToStep(index)">
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <el-card class="current-step-info">
          <template v-if="currentStepInfo">
            <div class="step-header">
              <h3>{{ currentStepInfo.title }}</h3>
              <p class="description">{{ currentStepInfo.description }}</p>
            </div>
            
            <div class="step-actions">
              <el-form v-if="currentStepInfo.formItems" 
                      :model="formData"
                      :rules="rules"
                      ref="stepForm" 
                      label-width="120px"
                      class="step-form">
                <el-form-item v-for="(item, index) in currentStepInfo.formItems"
                             :key="index"
                             :label="item.label"
                             :prop="item.prop"
                             :required="item.required">
                  <el-input v-if="item.type === 'input'" 
                           v-model="formData[item.prop]"
                           :placeholder="item.placeholder">
                    <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                  </el-input>
                  <el-select v-else-if="item.type === 'select'"
                            v-model="formData[item.prop]"
                            :placeholder="item.placeholder"
                            :multiple="item.multiple">
                    <el-option v-for="option in item.options"
                             :key="option.value"
                             :label="option.label"
                             :value="option.value">
                    </el-option>
                  </el-select>
                  <el-date-picker v-else-if="item.type === 'date'"
                                v-model="formData[item.prop]"
                                :type="item.dateType || 'date'"
                                :placeholder="item.placeholder"
                                value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <el-input v-else-if="item.type === 'textarea'"
                           type="textarea"
                           v-model="formData[item.prop]"
                           :rows="item.rows || 4"
                           :placeholder="item.placeholder">
                  </el-input>
                  <el-upload v-else-if="item.type === 'upload'"
                            class="upload-demo"
                            action="#"
                            :auto-upload="false"
                            :on-change="handleFileChange"
                            :file-list="fileList">
                    <el-button size="small" type="primary">选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">{{ item.tip }}</div>
                  </el-upload>
                </el-form-item>
              </el-form>
              
              <div class="step-tips" v-if="currentStepInfo.tips">
                <h4>注意事项：</h4>
                <ul>
                  <li v-for="(tip, index) in currentStepInfo.tips" :key="index">{{ tip }}</li>
                </ul>
              </div>
              
              <div class="button-group">
                <el-button v-if="currentStep > 0" 
                          @click="prevStep"
                          icon="el-icon-arrow-left">上一步</el-button>
                <el-button type="primary" 
                          @click="nextStep"
                          :loading="submitting"
                          :disabled="!canProceed">
                  <i :class="currentStep === processSteps.length - 1 ? 'el-icon-check' : 'el-icon-arrow-right'"></i>
                  {{ currentStep === processSteps.length - 1 ? '完成' : '下一步' }}
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CultureProcess',
  data() {
    return {
      currentStep: 0,
      formData: {},
      fileList: [],
      submitting: false,
      rules: {
        activityType: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
        activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        activityDate: [{ required: true, message: '请选择活动日期', trigger: 'change' }],
        purpose: [{ required: true, message: '请填写活动目的', trigger: 'blur' }],
        content: [{ required: true, message: '请填写活动内容', trigger: 'blur' }],
        participants: [
          { required: true, message: '请输入参与人数', trigger: 'blur' },
          { type: 'number', message: '参与人数必须为数字', trigger: 'blur' }
        ],
        budget: [
          { required: true, message: '请输入预算金额', trigger: 'blur' },
          { type: 'number', message: '预算金额必须为数字', trigger: 'blur' }
        ],
        culturalTheme: [{ required: true, message: '请选择企业文化主题', trigger: 'change' }],
        culturalDescription: [{ required: true, message: '请填写理念阐述', trigger: 'blur' }],
        longTermPlan: [{ required: true, message: '请填写长期规划', trigger: 'blur' }],
        specificMeasures: [{ required: true, message: '请填写具体措施', trigger: 'blur' }]
      },
      processSteps: [
        {
          title: '活动基本信息',
          shortDesc: '填写活动基础信息',
          icon: 'el-icon-collection',
          description: '请填写企业文化活动的基本信息，包括活动类型、名称、时间等',
          formItems: [
            {
              type: 'select',
              label: '活动类型',
              prop: 'activityType',
              placeholder: '请选择活动类型',
              required: true,
              options: [
                { label: '团建活动', value: 'team_building' },
                { label: '文化讲座', value: 'lecture' },
                { label: '技能培训', value: 'training' },
                { label: '节日庆祝', value: 'festival' },
                { label: '企业展览', value: 'exhibition' },
                { label: '文化沙龙', value: 'salon' },
                { label: '员工表彰', value: 'recognition' }
              ]
            },
            {
              type: 'input',
              label: '活动名称',
              prop: 'activityName',
              placeholder: '请输入活动名称',
              required: true
            },
            {
              type: 'date',
              label: '活动日期',
              prop: 'activityDate',
              placeholder: '请选择活动日期',
              required: true
            },
            {
              type: 'select',
              label: '活动部门',
              prop: 'departments',
              placeholder: '请选择参与部门',
              multiple: true,
              options: [
                { label: '人力资源部', value: 'hr' },
                { label: '行政部', value: 'admin' },
                { label: '技术部', value: 'tech' },
                { label: '市场部', value: 'marketing' },
                { label: '财务部', value: 'finance' }
              ]
            }
          ],
          tips: [
            '活动名称应简明扼要，突出主题',
            '请提前至少7个工作日提交活动申请',
            '跨部门活动需要相关部门负责人审批'
          ]
        },
        {
          title: '活动详细内容',
          shortDesc: '规划活动内容',
          icon: 'el-icon-document',
          description: '详细说明活动内容、目的和具体安排',
          formItems: [
            {
              type: 'textarea',
              label: '活动目的',
              prop: 'purpose',
              placeholder: '请描述活动目的和预期效果',
              required: true,
              rows: 4
            },
            {
              type: 'textarea',
              label: '活动内容',
              prop: 'content',
              placeholder: '请详细描述活动内容和流程安排',
              required: true,
              rows: 6
            },
            {
              type: 'input',
              label: '参与人数',
              prop: 'participants',
              placeholder: '请输入预计参与人数',
              required: true,
              unit: '人'
            },
            {
              type: 'upload',
              label: '活动方案',
              prop: 'proposal',
              tip: '请上传详细的活动方案文档，支持 PDF、Word 格式'
            }
          ],
          tips: [
            '活动方案应包含具体的时间节点安排',
            '注意考虑活动的可行性和安全性',
            '大型活动建议准备应急预案'
          ]
        },
        {
          title: '资源协调安排',
          shortDesc: '资源调配',
          icon: 'el-icon-goods',
          description: '安排活动所需的场地、物资等资源',
          formItems: [
            {
              type: 'select',
              label: '场地选择',
              prop: 'venue',
              placeholder: '请选择活动场地',
              required: true,
              options: [
                { label: '多功能会议室', value: 'meeting_room' },
                { label: '培训教室', value: 'training_room' },
                { label: '员工活动中心', value: 'activity_center' },
                { label: '户外活动场地', value: 'outdoor' },
                { label: '公司大厅', value: 'hall' }
              ]
            },
            {
              type: 'textarea',
              label: '物资清单',
              prop: 'materials',
              placeholder: '请列出所需物资清单及数量',
              required: true
            },
            {
              type: 'input',
              label: '预算金额',
              prop: 'budget',
              placeholder: '请输入活动预算',
              required: true,
              unit: '元'
            },
            {
              type: 'select',
              label: '协助人员',
              prop: 'helpers',
              placeholder: '请选择活动协助人员',
              multiple: true,
              options: [
                { label: '行政助理', value: 'admin_assistant' },
                { label: '技术支持', value: 'tech_support' },
                { label: '场地管理员', value: 'venue_manager' },
                { label: '安保人员', value: 'security' }
              ]
            }
          ],
          tips: [
            '场地需提前预约并确认可用性',
            '大额预算需要部门经理审批',
            '设备物资请提前测试确保可用'
          ]
        },
        {
          title: '文化理念传播',
          shortDesc: '文化理念融入',
          icon: 'el-icon-reading',
          description: '将企业文化理念融入活动中，加强文化认同感和凝聚力',
          formItems: [
            {
              type: 'select',
              label: '文化主题',
              prop: 'culturalTheme',
              placeholder: '请选择企业文化主题',
              required: true,
              options: [
                { label: '创新精神', value: 'innovation' },
                { label: '团队协作', value: 'teamwork' },
                { label: '客户至上', value: 'customer_first' },
                { label: '诚信正直', value: 'integrity' },
                { label: '追求卓越', value: 'excellence' },
                { label: '责任担当', value: 'responsibility' }
              ]
            },
            {
              type: 'textarea',
              label: '理念阐述',
              prop: 'culturalDescription',
              placeholder: '请详细阐述如何在活动中体现企业文化理念',
              required: true,
              rows: 6
            },
            {
              type: 'select',
              label: '传播形式',
              prop: 'propagationForm',
              placeholder: '请选择文化理念传播形式',
              multiple: true,
              options: [
                { label: '主题演讲', value: 'speech' },
                { label: '互动讨论', value: 'discussion' },
                { label: '案例分享', value: 'case_sharing' },
                { label: '文化展示', value: 'culture_display' },
                { label: '团队活动', value: 'team_activity' },
                { label: '视频展示', value: 'video' }
              ]
            },
            {
              type: 'upload',
              label: '文化素材',
              prop: 'culturalMaterials',
              tip: '上传文化理念相关的PPT、视频、图片等素材'
            },
            {
              type: 'textarea',
              label: '预期效果',
              prop: 'expectedResults',
              placeholder: '请描述文化理念传播的预期效果和评估方式',
              rows: 4
            }
          ],
          tips: [
            '文化理念应与公司发展战略相契合',
            '注重员工参与度和互动性',
            '建议准备具体的案例进行分享',
            '可以通过问卷等方式收集反馈'
          ]
        },
        {
          title: '文化建设计划',
          shortDesc: '长期文化建设',
          icon: 'el-icon-data-analysis',
          description: '制定长期的企业文化建设计划，确保文化理念持续传承',
          formItems: [
            {
              type: 'textarea',
              label: '长期规划',
              prop: 'longTermPlan',
              placeholder: '请描述企业文化建设的长期规划和目标',
              required: true,
              rows: 6
            },
            {
              type: 'select',
              label: '建设方向',
              prop: 'culturalDirection',
              placeholder: '请选择文化建设重点方向',
              multiple: true,
              options: [
                { label: '价值观塑造', value: 'values' },
                { label: '团队文化建设', value: 'team_culture' },
                { label: '创新文化培育', value: 'innovation_culture' },
                { label: '学习型组织打造', value: 'learning_org' },
                { label: '企业品牌文化', value: 'brand_culture' }
              ]
            },
            {
              type: 'textarea',
              label: '具体措施',
              prop: 'specificMeasures',
              placeholder: '请列出具体的文化建设措施和行动计划',
              required: true,
              rows: 6
            },
            {
              type: 'select',
              label: '考核指标',
              prop: 'evaluationIndex',
              placeholder: '请选择文化建设考核指标',
              multiple: true,
              options: [
                { label: '员工满意度', value: 'employee_satisfaction' },
                { label: '文化认同度', value: 'culture_identity' },
                { label: '团队凝聚力', value: 'team_cohesion' },
                { label: '创新能力', value: 'innovation_ability' },
                { label: '执行力', value: 'execution' }
              ]
            },
            {
              type: 'textarea',
              label: '保障措施',
              prop: 'guaranteeMeasures',
              placeholder: '请描述文化建设的保障措施和资源支持',
              rows: 4
            }
          ],
          tips: [
            '文化建设是持续性工作，需要长期坚持',
            '注重文化建设的实效性和可操作性',
            '建议建立定期评估和反馈机制',
            '重视各层级的参与和支持'
          ]
        }
      ]
    }
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep]
    },
    canProceed() {
      return true // 实际应用中需要根据表单验证结果返回
    }
  },
  methods: {
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    async nextStep() {
      try {
        await this.$refs.stepForm.validate()
        if (this.currentStep < this.processSteps.length - 1) {
          this.currentStep++
        } else {
          await this.completeProcess()
        }
      } catch (error) {
        // 表单验证失败
        return false
      }
    },
    async completeProcess() {
      this.submitting = true
      try {
        // 这里可以添加提交数据到后端的逻辑
        await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟提交
        this.$message.success('企业文化管理流程已完成')
        this.$router.push('/main/process')
      } catch (error) {
        this.$message.error('提交失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    handleFileChange(file, fileList) {
      this.fileList = fileList.slice(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.culture-process {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    
    .header-content {
      text-align: center;
    }

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .process-timeline {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .el-steps {
      margin-bottom: 40px;
    }
  }

  .process-content {
    margin-top: 20px;

    .current-step-info {
      .step-header {
        text-align: center;
        margin-bottom: 30px;

        h3 {
          color: #303133;
          margin-bottom: 10px;
          font-size: 20px;
        }

        .description {
          color: #606266;
          font-size: 14px;
        }
      }

      .step-form {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 4px;

        .el-form-item {
          margin-bottom: 22px;
        }
      }

      .step-tips {
        max-width: 600px;
        margin: 20px auto;
        padding: 15px;
        background: #f4f4f5;
        border-radius: 4px;
        
        h4 {
          color: #303133;
          margin: 0 0 10px;
          font-size: 14px;
        }

        ul {
          margin: 0;
          padding-left: 20px;
          
          li {
            color: #909399;
            font-size: 13px;
            line-height: 1.8;
          }
        }
      }

      .button-group {
        text-align: center;
        margin-top: 30px;

        .el-button {
          margin: 0 10px;
          padding: 12px 20px;

          i {
            margin-right: 5px;
          }
        }
      }
    }
  }

  :deep(.el-step__icon) {
    cursor: pointer;
  }

  :deep(.el-upload) {
    width: 100%;
  }

  :deep(.el-select) {
    width: 100%;
  }
}
</style> 